<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>同步任务_宏任务_微任务</h1>
    <h2>先同步再异步，在此基础上先宏任务再微任务</h2>

    <script>
      setTimeout(function () {
        new Promise(function (resolve, reject) {
          console.log('异步宏任务promise')
          resolve()
        }).then(function () {
          console.log('异步微任务then')
        })
        console.log('异步宏任务')
      }, 0)
      new Promise(function (resolve, reject) {
        console.log('同步宏任务promise')
        resolve()
      }).then(function () {
        console.log('同步微任务then')
      })
      console.log('同步宏任务')
      // 输出
      // 同步宏任务promise
      // 同步宏任务
      //同步微任务then
      //异步宏任务promise
      //异步宏任务
      // 异步微任务then

      setTimeout(() => {
        console.log('异步1任务time1')
        new Promise(function (resolve, reject) {
          console.log('异步1宏任务promise')
          setTimeout(() => {
            console.log('异步1任务time2')
          }, 0)
          resolve()
        }).then(function () {
          console.log('异步1微任务then')
        })
      }, 0)
      console.log('主线程宏任务')
      setTimeout(() => {
        console.log('异步2任务time2')
      }, 0)
      new Promise(function (resolve, reject) {
        console.log('宏任务promise')
        // reject();
        resolve()
      })
        .then(function () {
          console.log('微任务then')
        })
        .catch(function () {
          console.log('微任务catch')
        })
      console.log('主线程宏任务2')
      // 主线程宏任务
      // 宏任务promise
      // 主线程宏任务2
      // 微任务then
      // //  微任务catch   这里不对  不会走 catch 没有报错
      //
      //异步1任务time1
      //异步1宏任务promise
      //异步2任务time2
      //异步1微任务then
      //异步1任务time2
      //
      //
      //
    </script>
  </body>
</html>
